<script setup>
	import * as AntdIcons from "@ant-design/icons-vue";

	defineProps({
		item: {
			type: Object,
			require: true,
			default: () => ({}),
		}
	});

	defineOptions({
		name: "MenuItem",
	});
</script>

<template>	
	<template v-if="item.children">
		<a-sub-menu :key="item.id">
			<template #title>
				<span>
					<component v-if="item.icon" :is="AntdIcons[item.icon]" />
					<span>{{ item.name }}</span>
				</span>
			</template>
			<MenuItem v-for="subItem in item.children" :item="subItem" />
		</a-sub-menu>
	</template>
	<template v-else>
		<a-menu-item :key="item.id" :path="item.path">
			<span>
				<component v-if="item.icon" :is="AntdIcons[item.icon]" />
				<span>{{ item.name }}</span>
			</span>
		</a-menu-item>
	</template>
</template>